<!DOCTYPE html><html lang="en" class="text-gray-500 antialiased bg-white"><head><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-YK9KKZB935"></script><script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-YK9KKZB935', {
              page_path: window.location.pathname,
            });
          </script><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/manifest.json"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00b4b6"/><meta name="theme-color" content="#ffffff"/><meta name="description" content="Tailwind CSS 是一个功能类优先的 CSS 框架，它由 Adam Wathan 创建。本站提供 Tailwind CSS 官方文档中文翻译致力于为广大国内开发者提供准确的中文文档，助力开发者掌握并使用这一框架。"/><meta name="keywords" content="Tailwind CSS, CSS 框架, CSS framework, Tailwind CSS 中国, Tailwind CSS 中文文档, Tailwind CSS 代码,Tailwind CSS 入门"/><meta name="author" content="TailwindCSS中文网"/><meta name="google-site-verification" content="K6lmDHP95YNtBrmzbE8A5HivIoXC9kPq47XvdBM3jVY"/><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><meta name="twitter:site" content="@tailwindcss"/><meta name="twitter:description" content="Documentation for the Tailwind CSS framework."/><meta name="twitter:creator" content="@tailwindcss"/><meta property="og:url" content="https://tailwindcss.com/resources"/><meta property="og:type" content="article"/><meta property="og:description" content="Documentation for the Tailwind CSS framework."/><meta property="og:image" content="https://tailwindcss.com/_next/static/media/twitter-large-card.85c0ff9e455da585949ff0aa50981857.jpg"/><link rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"/><title>资源 - Tailwind CSS</title><meta name="twitter:title" content="资源 - Tailwind CSS"/><meta property="og:title" content="资源 - Tailwind CSS"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://tailwindcss.com/_next/static/media/twitter-square.daf77586b35e90319725e742f6e069f9.jpg"/><link rel="preload" href="/_next/static/css/91ad8a1bc71db66a58e6.css" as="style" crossorigin="anonymous"/><link rel="stylesheet" href="/_next/static/css/91ad8a1bc71db66a58e6.css" crossorigin="anonymous" data-n-g=""/><noscript data-n-css="true"></noscript><link rel="preload" href="/_next/static/chunks/main-53486d82b2545edae223.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/webpack-07c5bcab23dc3e52a7c0.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/framework.dc32737cd22c934f019a.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/commons.22d76c353a4f72632887.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.1d9cdb0d7e423ae8ff11.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/pages/_app-22af6c3e18ff3a768b97.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/cecf69130dad263f9cb4ff787dd0f2dc73bfee9f.a38ff4d7f346d15b14bc.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/pages/resources-6b97d8f1aa18520a45da.module.js" as="script" crossorigin="anonymous"/></head><body><div id="__next"><div class="sticky top-0 z-40 lg:z-50 w-full max-w-8xl mx-auto bg-white flex-none flex"><div class="flex-none pl-4 sm:pl-6 xl:pl-8 flex items-center border-b border-gray-200 lg:border-b-0 lg:w-60 xl:w-72"><a class="overflow-hidden w-10 md:w-auto" href="/"><span class="sr-only">Tailwind CSS home page</span><svg viewBox="0 0 247 31" class="w-auto h-6"><path fill-rule="evenodd" clip-rule="evenodd" d="M25.517 0C18.712 0 14.46 3.382 12.758 10.146c2.552-3.382 5.529-4.65 8.931-3.805 1.941.482 3.329 1.882 4.864 3.432 2.502 2.524 5.398 5.445 11.722 5.445 6.804 0 11.057-3.382 12.758-10.145-2.551 3.382-5.528 4.65-8.93 3.804-1.942-.482-3.33-1.882-4.865-3.431C34.736 2.92 31.841 0 25.517 0zM12.758 15.218C5.954 15.218 1.701 18.6 0 25.364c2.552-3.382 5.529-4.65 8.93-3.805 1.942.482 3.33 1.882 4.865 3.432 2.502 2.524 5.397 5.445 11.722 5.445 6.804 0 11.057-3.381 12.758-10.145-2.552 3.382-5.529 4.65-8.931 3.805-1.941-.483-3.329-1.883-4.864-3.432-2.502-2.524-5.398-5.446-11.722-5.446z" fill="#06B6D4"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M76.546 12.825h-4.453v8.567c0 2.285 1.508 2.249 4.453 2.106v3.463c-5.962.714-8.332-.928-8.332-5.569v-8.567H64.91V9.112h3.304V4.318l3.879-1.143v5.937h4.453v3.713zM93.52 9.112h3.878v17.849h-3.878v-2.57c-1.365 1.891-3.484 3.034-6.285 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.285 2.999V9.112zm-5.674 14.636c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm16.016-17.313c-1.364 0-2.477-1.142-2.477-2.463a2.475 2.475 0 012.477-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.879v17.849h-3.879zm8.368 0V.9h3.878v26.06h-3.878zm29.053-17.849h4.094l-5.638 17.849h-3.807l-3.735-12.03-3.771 12.03h-3.806l-5.639-17.849h4.094l3.484 12.315 3.771-12.315h3.699l3.734 12.315 3.52-12.315zm8.906-2.677c-1.365 0-2.478-1.142-2.478-2.463a2.475 2.475 0 012.478-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.878v17.849h-3.878zm17.812-18.313c4.022 0 6.895 2.713 6.895 7.354V26.96h-3.878V16.394c0-2.713-1.58-4.14-4.022-4.14-2.55 0-4.561 1.499-4.561 5.14v9.567h-3.879V9.112h3.879v2.285c1.185-1.856 3.124-2.749 5.566-2.749zm25.282-6.675h3.879V26.96h-3.879v-2.57c-1.364 1.892-3.483 3.034-6.284 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.284 2.999V1.973zm-5.674 21.775c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm22.553 3.677c-5.423 0-9.481-4.105-9.481-9.389 0-5.318 4.058-9.388 9.481-9.388 3.519 0 6.572 1.82 8.008 4.605l-3.34 1.928c-.79-1.678-2.549-2.749-4.704-2.749-3.16 0-5.566 2.392-5.566 5.604 0 3.213 2.406 5.605 5.566 5.605 2.155 0 3.914-1.107 4.776-2.749l3.34 1.892c-1.508 2.82-4.561 4.64-8.08 4.64zm14.472-13.387c0 3.249 9.661 1.285 9.661 7.89 0 3.57-3.125 5.497-7.003 5.497-3.591 0-6.177-1.607-7.326-4.177l3.34-1.927c.574 1.606 2.011 2.57 3.986 2.57 1.724 0 3.052-.571 3.052-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.909-5.462 6.572-5.462 2.945 0 5.387 1.357 6.644 3.713l-3.268 1.82c-.647-1.392-1.904-2.035-3.376-2.035-1.401 0-2.622.607-2.622 1.892zm16.556 0c0 3.249 9.66 1.285 9.66 7.89 0 3.57-3.124 5.497-7.003 5.497-3.591 0-6.176-1.607-7.326-4.177l3.34-1.927c.575 1.606 2.011 2.57 3.986 2.57 1.724 0 3.053-.571 3.053-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.908-5.462 6.572-5.462 2.944 0 5.386 1.357 6.643 3.713l-3.268 1.82c-.646-1.392-1.903-2.035-3.375-2.035-1.401 0-2.622.607-2.622 1.892z" fill="#000"></path></svg></a></div><div class="flex-auto border-b border-gray-200 h-18 flex items-center justify-between px-4 sm:px-6 lg:mx-6 lg:px-0 xl:mx-8"><button type="button" class="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 hover:text-gray-600 transition-colors duration-200"><svg width="24" height="24" fill="none" class="text-gray-400 group-hover:text-gray-500 transition-colors duration-200"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>快速搜索<span class="hidden sm:inline"> 一切</span></span></button><div class="flex items-center space-x-6"><form class="relative hidden lg:block"><label><span class="sr-only">Tailwind CSS Version</span><select class="appearance-none block bg-transparent pr-7 py-1 text-gray-500 font-medium text-sm focus:outline-none focus:text-gray-900 transition-colors duration-200"><option value="v2">v<!-- -->2.0.2</option><option value="v1">v1.9.6</option><option value="v0">v0.7.4</option></select></label><svg class="w-5 h-5 text-gray-400 absolute top-1/2 right-0 -mt-2.5 pointer-events-none" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path></svg></form><a href="https://github.com/tailwindlabs/tailwindcss" class="text-gray-400 hover:text-gray-500 transition-colors duration-200"><span class="sr-only">Tailwind CSS on GitHub</span><svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></div><button type="button" class="fixed z-50 bottom-4 right-4 w-16 h-16 rounded-full bg-gray-900 text-white block lg:hidden"><span class="sr-only">Open site navigation</span><svg width="24" height="24" fill="none" class="absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform"><path d="M4 8h16M4 16h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><svg width="24" height="24" fill="none" class="absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform opacity-0 scale-80"><path d="M6 18L18 6M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="w-full max-w-8xl mx-auto"><div class="lg:flex"><div id="sidebar" class="fixed z-40 inset-0 flex-none h-full bg-black bg-opacity-25 w-full lg:bg-white lg:static lg:h-auto lg:overflow-y-visible lg:pt-0 lg:w-60 xl:w-72 lg:block hidden"><div id="navWrapper" class="h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:relative lg:sticky lg:bg-transparent overflow-hidden lg:top-18 bg-white mr-24 lg:mr-0"><div class="hidden lg:block h-12 pointer-events-none absolute inset-x-0 z-10 bg-gradient-to-b from-white"></div><nav id="nav" class="px-1 pt-6 overflow-y-auto font-medium text-base sm:px-3 xl:px-5 lg:text-sm pb-10 lg:pt-10 lg:pb-16 sticky?lg:h-(screen-18)"><div class="relative flex mb-8 px-3 lg:hidden"><form class="relative"><label><span class="sr-only">Tailwind CSS Version</span><select class="appearance-none block bg-transparent pr-7 py-1 text-gray-500 font-medium text-sm focus:outline-none focus:text-gray-900 transition-colors duration-200"><option value="v2">v<!-- -->2.0.2</option><option value="v1">v1.9.6</option><option value="v0">v0.7.4</option></select></label><svg class="w-5 h-5 text-gray-400 absolute top-1/2 right-0 -mt-2.5 pointer-events-none" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path></svg></form></div><ul><li><a href="/docs" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-pink-500 to-rose-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 6C10.0929 6 11.1175 6.29218 12 6.80269V16.8027C11.1175 16.2922 10.0929 16 9 16C7.90714 16 6.88252 16.2922 6 16.8027V6.80269C6.88252 6.29218 7.90714 6 9 6Z" fill="#FFF1F2"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15 6C16.0929 6 17.1175 6.29218 18 6.80269V16.8027C17.1175 16.2922 16.0929 16 15 16C13.9071 16 12.8825 16.2922 12 16.8027V6.80269C12.8825 6.29218 13.9071 6 15 6Z" fill="#FECDD3"></path></svg></div>中文文档</a></li><li><a href="https://tailwindui.com/components?utm_source=tailwindcss&amp;utm_medium=navigation" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-purple-500 to-indigo-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path d="M6 9l6-3 6 3v6l-6 3-6-3V9z" fill="#F5F3FF"></path><path d="M6 9l6 3v6l-6-3V9z" fill="#DDD6FE"></path><path d="M18 9l-6 3v6l6-3V9z" fill="#C4B5FD"></path></svg></div>组件</a></li><li><a href="https://play.tailwindcss.com" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-yellow-400 to-orange-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.196 6.02a1 1 0 01.785 1.176l-2 10a1 1 0 01-1.961-.392l2-10a1 1 0 011.176-.784z" fill="#FDE68A"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.293 9.293a1 1 0 011.414 0l2 2a1 1 0 010 1.414l-2 2a1 1 0 01-1.414-1.414L16.586 12l-1.293-1.293a1 1 0 010-1.414zM8.707 9.293a1 1 0 010 1.414L7.414 12l1.293 1.293a1 1 0 11-1.414 1.414l-2-2a1 1 0 010-1.414l2-2a1 1 0 011.414 0z" fill="#FDF4FF"></path></svg></div>在线运行环境</a></li><li><a href="https://blog.tailwindcss.com" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-green-400 to-cyan-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path d="M8 9a1 1 0 011-1h8a1 1 0 011 1v7.5a1.5 1.5 0 01-1.5 1.5h-7A1.5 1.5 0 018 16.5V9z" fill="#6EE7B7"></path><path d="M15 7a1 1 0 00-1-1H7a1 1 0 00-1 1v9.5A1.5 1.5 0 007.5 18H16v-.085a1.5 1.5 0 01-1-1.415V7z" fill="#ECFDF5"></path><path fill="#A7F3D0" d="M8 8h5v4H8zM8 14h5v2H8z"></path></svg></div>新闻</a></li><li><a href="/resources" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4 text-gray-900"><div class="mr-3 rounded-md bg-gradient-to-br from-light-blue-400 to-indigo-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path d="M17 13a1 1 0 011 1v3a1 1 0 01-1 1H8.5a2.5 2.5 0 010-5H17z" fill="#93C5FD"></path><path d="M12.743 7.722a1 1 0 011.414 0l2.122 2.121a1 1 0 010 1.414l-6.01 6.01a2.5 2.5 0 11-3.536-3.536l6.01-6.01z" fill="#BFDBFE"></path><path d="M6 7a1 1 0 011-1h3a1 1 0 011 1v8.5a2.5 2.5 0 01-5 0V7z" fill="#EFF6FF"></path><path d="M9.5 15.5a1 1 0 11-2 0 1 1 0 012 0z" fill="#60A5FA"></path></svg></div>资源</a></li><li><a href="https://www.youtube.com/tailwindlabs" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-10"><div class="mr-3 rounded-md bg-gradient-to-br from-fuchsia-500 to-purple-600"><svg class="h-6 w-6" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="#F3E8FF"></circle><path d="M14.52 11.136a1 1 0 010 1.728l-3.016 1.759A1 1 0 0110 13.759v-3.518a1 1 0 011.504-.864l3.015 1.76z" fill="#C084FC"></path></svg></div>视频</a></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">入门</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/installation"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">安装</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="https://blog.tailwindcss.com/tailwindcss-v2"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">发布说明</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/upgrading-to-v2"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">升级指南</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/using-with-preprocessors"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">使用预处理器</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/optimizing-for-production"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">生产优化</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/browser-support"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">浏览器支持</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/intellisense"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">智能感知</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">核心概念</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/utility-first"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">功能优先</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/responsive-design"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">响应式设计</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/hover-focus-and-other-states"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">悬停、焦点和其它状态</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/dark-mode"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">深色模式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/adding-base-styles"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">添加基础样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/extracting-components"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">提取组件</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/adding-new-utilities"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">添加新的功能类</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/functions-and-directives"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">函数与指令</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">定制</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/configuration"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">配置</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/theme"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">主题</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/breakpoints"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">断点</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/customizing-colors"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/customizing-spacing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">间距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/configuring-variants"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">变体</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/plugins"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">插件</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/presets"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">预设</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">基础样式</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/preflight"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Preflight</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">布局</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/container"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">容器</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/box-sizing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Box Sizing</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/display"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Display</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/float"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">浮动</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/clear"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">清除浮动</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/object-fit"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Object Fit</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/object-position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Object Position</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/overflow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">溢出</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/overscroll-behavior"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Overscroll Behavior</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">定位</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/top-right-bottom-left"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Top / Right / Bottom / Left</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/visibility"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">可见性</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/z-index"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Z-Index</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">盒模型</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-direction"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Direction</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-wrap"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Wrap</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-grow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Grow</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-shrink"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Shrink</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/order"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Order</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">网格</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-template-columns"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Template Columns</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-column"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Column Start / End</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-template-rows"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Template Rows</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-row"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Row Start / End</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-auto-flow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Auto Flow</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-auto-columns"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Auto Columns</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-auto-rows"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Auto Rows</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/gap"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Gap</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">盒对齐</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/justify-content"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Justify Content</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/justify-items"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Justify Items</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/justify-self"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Justify Self</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/align-content"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Align Content</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/align-items"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Align Items</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/align-self"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Align Self</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/place-content"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Place Content</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/place-items"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Place Items</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/place-self"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Place Self</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">间距</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/padding"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">内边距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/margin"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">外边距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/space"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Space Between</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">尺寸</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">宽度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/min-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最小宽度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/max-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最大宽度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">高度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/min-height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最小高度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/max-height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最大高度</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">排版</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-family"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体序列</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-size"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体大小</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-smoothing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体平滑度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-style"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-weight"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体粗细</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-variant-numeric"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Font Variant Numeric</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/letter-spacing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字母间距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/line-height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">行高</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/list-style-type"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">列表项标记类型</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/list-style-position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">列表项标记位置</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/placeholder-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">占位文本颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/placeholder-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">占位文本不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-align"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本对齐</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本颜色不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-decoration"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本装饰</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-transform"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本转换</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-overflow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本溢出</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/vertical-align"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">垂直对齐</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/whitespace"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">空格</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/word-break"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本换行</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">背景</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-attachment"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像固定</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-clip"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像裁剪</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景颜色不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像位置</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-repeat"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像重复</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-size"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像大小</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-image"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/gradient-color-stops"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">渐变色停止</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">边框</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-radius"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框圆角</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-style"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-style"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-offset-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环偏移厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-offset-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环偏移颜色</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">特效</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/box-shadow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">盒阴影</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">不透明度</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">表格</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-collapse"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">表格边框</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/table-layout"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">表格布局</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">过渡和动画</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-property"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡属性</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-duration"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡持续时间</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-timing-function"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡计时函数</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-delay"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡延迟</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/animation"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">动画</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">转换</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transform"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">变换</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transform-origin"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">变换原点</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/scale"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">缩放</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/rotate"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">旋转</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/translate"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">平移</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/skew"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">倾斜</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">交互</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/appearance"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">表单外观</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/cursor"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">光标效果</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/outline"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/pointer-events"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">指向事件</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/resize"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">大小调整</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/user-select"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">用户选择</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">SVG</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/fill"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">填充</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/stroke"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">线条</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/stroke-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">线条厚度</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">可访问性</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/screen-readers"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">屏幕阅读器</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">官方插件</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/typography-plugin"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">排版</span></a></li></ul></li></ul></nav></div></div><div id="content-wrapper" class="min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible"><div class="px-4 sm:px-6 md:px-8 pt-10 pb-16"><h1 class="text-3xl text-gray-900 font-extrabold mb-4">资源</h1><div class="max-w-3xl"><div class="text-lg mb-5 space-y-5"><p>我们认为 Tailwind 是一个了不起的 CSS 框架，但您需要的不仅仅是一个生产优秀的视觉产品的 CSS 框架。</p><p>这里有一些资源，可以帮助您把您的 Tailwind 项目提升到一个新的水平。</p></div><p>关于 Tailwind CSS 品牌资产和使用指南，请访问<!-- --> <a class="text-cyan-700 font-medium shadow-link" href="/brand">品牌页面</a>.</p></div><div class="grid md:grid-cols-2 gap-8 md:gap-6 xl:gap-8 my-8 sm:my-12"><section><h2 class="text-xl text-gray-900 font-bold mb-4">学习 UI 设计</h2><a href="https://refactoringui.com/book" class="h-40 sm:h-56 xl:h-64 bg-gray-900 bg-cover rounded-3xl mb-6 flex items-center justify-center" style="background-image:url(/_next/static/media/refactoring-ui-bg.5944a2de00d293d1634d2ae102e0f310.png)"><div class="w-60 max-w-full"><div class="relative" style="padding-top:25%"><span class="sr-only">Refactoring UI</span><svg viewBox="0 0 240 60" width="240" height="60" fill="none" class="absolute inset-0 w-full h-full"><path d="M172.94 49.494c.77-.95 1.37-2.07 1.8-3.34a26.501 26.501 0 0047.055-21.077 26.502 26.502 0 00-41.484-16.594 26.504 26.504 0 00-10.021 14.211h-3.63a30.01 30.01 0 116.28 26.8z" fill="url(#refactoring-ui_svg__paint0_linear)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M23.82 32.244l6.79 9.28h-4.55l-6.2-8.8h-2.08v8.8H14v-21.82h6.6c5.85 0 7.93 3.2 7.93 6.56 0 3.1-2.15 5.34-4.7 5.98h-.01zm.8-5.89c0-2.2-1.34-3.49-3.77-3.49h-3.07v6.88h3.1c2.4 0 3.74-1.44 3.74-3.39zm13.58-.67c5.28.03 7.71 4.13 7.71 8.03 0 .32 0 .74-.06 1.06H34.01c0 2.4 2.11 4.48 4.57 4.48 1.57 0 2.63-.64 3.43-1.73h3.68a7.37 7.37 0 01-7.1 4.54c-4.71 0-8.17-3.45-8.17-8.35 0-4.32 2.95-8.03 7.78-8.03zm0 2.69a4.1 4.1 0 00-4.16 3.8h8.29a4.13 4.13 0 00-4.13-3.8zm8.9.83v-3h2.18v-2.54c0-3.45 1.82-5.34 5.22-5.34.86 0 1.7.1 2.33.29v2.94a6.463 6.463 0 00-1.73-.25c-1.6 0-2.24.96-2.24 2.43v2.46h3.43v3.01h-3.43v12.32h-3.58v-12.32H47.1zm25.77-3v15.32h-3.49v-1.95h-.1a6.48 6.48 0 01-5.24 2.5c-3.46 0-7.36-2.76-7.36-8.23 0-4.86 3.46-8.13 7.62-8.13 2.56 0 4.1 1.35 5.02 2.56h.06v-2.08h3.5l-.01.01zm-12.51 7.63c0 2.56 1.47 5.09 4.64 5.09 2.37 0 4.54-2.05 4.54-5 0-3.1-2.01-5.15-4.5-5.15-3.18 0-4.68 2.56-4.68 5.06zm23.2-8.16c4.4 0 6.6 2.88 7.08 5.12h-3.68c-.48-1.22-1.63-2.08-3.42-2.08-2.6 0-4.45 1.89-4.45 5.12 0 2.91 1.79 5.15 4.57 5.15 1.99 0 3.01-1.12 3.52-2.3h3.72a7.17 7.17 0 01-7.3 5.37c-4.6 0-8.2-3.3-8.2-8.25 0-4.48 3.14-8.13 8.17-8.13h-.01zm8.05 3.52v-3h1.92v-4.9h3.58v4.9h3.81v3h-3.8v6.85c0 2.08.63 2.65 2.1 2.65.61 0 1.32-.12 1.86-.25v2.91c-.8.22-1.82.35-2.72.35-3.8 0-4.83-2.3-4.83-5.44v-7.07h-1.92zm10.34 4.64a7.952 7.952 0 012.343-5.846 7.956 7.956 0 015.857-2.314c4.8 0 8.19 3.52 8.19 8.16a8.08 8.08 0 01-5.037 7.63 8.068 8.068 0 01-3.163.59 8.061 8.061 0 01-8.19-8.22zm3.65 0c0 2.94 2.08 5.02 4.54 5.02 2.72 0 4.58-2.17 4.58-5.02 0-2.72-1.73-5-4.58-5-2.75 0-4.54 2.15-4.54 5zm24.52-8.03v3.33c-.45-.07-1-.16-1.8-.16-2.42 0-3.86 1.6-3.86 4.8v7.74h-3.59v-15.32h3.52v2.18h.1a4.98 4.98 0 014.29-2.66c.57 0 .96.03 1.34.1v-.01zm1.96 15.71v-15.32h3.58v15.33h-3.58v-.01zm-.2-18.72v-3.65h3.98v3.65h-3.98zm7.34 18.72v-15.32h3.56v1.92h.06a5.594 5.594 0 014.67-2.43c3.17 0 5.95 2.08 5.95 7v8.84h-3.58v-8.64c0-2.62-1.25-4.03-3.3-4.03-2.24 0-3.77 1.57-3.77 4.54v8.13h-3.59v-.01zM172 26.184v14.85c0 5.63-2.56 8.7-8.1 8.7-4.28 0-7.04-2.36-7.64-6.01h3.58c.42 1.7 1.63 3.04 4.22 3.04 2.95 0 4.52-1.89 4.52-5.28v-1.92h-.07a6.683 6.683 0 01-5.21 2.37c-4.04 0-7.5-3.14-7.5-8.13 0-4.67 3.24-8.1 7.62-8.1 2.63 0 4.2 1.35 5.06 2.47h.1v-1.99H172zm-12.54 7.64c0 2.46 1.5 4.99 4.6 4.99 2.5 0 4.58-2.02 4.58-4.93 0-3.07-1.98-5.09-4.51-5.09-3.1 0-4.67 2.56-4.67 5.03zm31.53 8.41c-4.32 0-8.19-2.43-8.19-9.37v-13.16h3.78v13.5c0 3.49 1.63 5.76 4.41 5.76 3.23 0 4.39-2.46 4.39-5.76v-13.5h3.74v13.08c0 6.85-3.52 9.44-8.13 9.44v.01zm11.72-.7v-21.83h3.78v21.82h-3.78v.01z" fill="#fff"></path><defs><linearGradient id="refactoring-ui_svg__paint0_linear" x1="196.217" y1="0" x2="196.217" y2="60.02" gradientUnits="userSpaceOnUse"><stop stop-color="#3DACEC"></stop><stop offset="1" stop-color="#5A77F3"></stop></linearGradient></defs></svg></div></div></a><div class="space-y-5"><p>Refactoring UI 是由 Adam Wathan 和 Steve Schoger 共同编写的《面向开发者的设计》一书+视频系列。它几乎涵盖了我们所知道的关于设计优秀作品一切。</p><p>到目前为止，已经有近一万人选择了它，并对它如何帮助他们改进工作大加赞美。</p></div></section><section><h2 class="text-xl text-gray-900 font-bold mb-4">Tailwind CSS 官方组件</h2><a href="https://tailwindui.com/" class="h-40 sm:h-56 xl:h-64 bg-gray-300 rounded-3xl mb-6 overflow-hidden flex"><div class="relative flex-none flex items-center justify-center px-6 xl:px-10"><div class="bg-gray-900 absolute inset-0 -left-64 transform -skew-x-20"></div><div class="w-60 max-w-full"><div class="relative" style="padding-top:25%"><span class="sr-only">Tailwind UI</span><svg viewBox="0 0 240 60" width="240" height="60" fill="none" class="absolute inset-0 w-full h-full"><path d="M42.429 17.965c-5.714 0-9.287 2.857-10.715 8.571 2.143-2.857 4.643-3.929 7.5-3.214 1.631.407 2.796 1.59 4.086 2.9 2.1 2.131 4.532 4.6 9.843 4.6 5.714 0 9.286-2.857 10.714-8.571-2.143 2.857-4.642 3.928-7.5 3.214-1.63-.407-2.795-1.59-4.085-2.9-2.1-2.132-4.532-4.6-9.843-4.6zM31.714 30.822c-5.714 0-9.286 2.857-10.714 8.571 2.143-2.857 4.642-3.928 7.5-3.214 1.63.407 2.795 1.59 4.085 2.9 2.1 2.132 4.532 4.6 9.844 4.6 5.713 0 9.286-2.857 10.714-8.571-2.143 2.857-4.643 3.929-7.5 3.214-1.63-.407-2.796-1.59-4.086-2.9-2.1-2.131-4.532-4.6-9.843-4.6z" fill="#16BDCA"></path><path d="M83.418 27.736v-3.343h-3.986v-4.5l-3.471 1.028v3.472h-2.957v3.343h2.957v7.714c0 4.179 2.121 5.657 7.457 5.014v-3.118c-2.636.129-3.986.161-3.986-1.896v-7.714h3.986zm15.218-3.343v2.282c-1.222-1.671-3.118-2.7-5.625-2.7-4.372 0-8.004 3.664-8.004 8.454 0 4.757 3.632 8.453 8.004 8.453 2.507 0 4.403-1.028 5.625-2.732v2.314h3.471V24.393h-3.471zM93.557 37.57c-2.893 0-5.079-2.153-5.079-5.142 0-2.99 2.186-5.143 5.08-5.143 2.892 0 5.078 2.153 5.078 5.143 0 2.989-2.186 5.142-5.079 5.142zm14.333-15.589c1.221 0 2.217-1.028 2.217-2.218a2.222 2.222 0 00-2.217-2.218 2.222 2.222 0 00-2.218 2.218c0 1.19.996 2.218 2.218 2.218zm-1.736 18.482h3.471v-16.07h-3.471v16.071zm7.502 0h3.471V17h-3.471v23.464zm26.016-16.071l-3.15 11.09-3.342-11.09h-3.311l-3.375 11.09-3.118-11.09h-3.664l5.046 16.071h3.407l3.375-10.832 3.343 10.832h3.407l5.047-16.071h-3.665zm7.957-2.41c1.221 0 2.218-1.03 2.218-2.219a2.223 2.223 0 00-2.218-2.218 2.222 2.222 0 00-2.218 2.218c0 1.19.996 2.218 2.218 2.218zm-1.736 18.481h3.472v-16.07h-3.472v16.071zm15.956-16.489c-2.186 0-3.922.804-4.982 2.475v-2.057h-3.472v16.071h3.472V31.85c0-3.279 1.8-4.629 4.082-4.629 2.186 0 3.6 1.286 3.6 3.729v9.514h3.471v-9.868c0-4.178-2.571-6.621-6.171-6.621zm22.637-6.01v8.71c-1.221-1.671-3.118-2.7-5.625-2.7-4.371 0-8.004 3.664-8.004 8.454 0 4.757 3.633 8.453 8.004 8.453 2.507 0 4.404-1.028 5.625-2.732v2.314h3.471v-22.5h-3.471zm-5.079 19.606c-2.892 0-5.078-2.153-5.078-5.142 0-2.99 2.186-5.143 5.078-5.143 2.893 0 5.079 2.153 5.079 5.143 0 2.989-2.186 5.142-5.079 5.142z" fill="#fff"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M202.069 20.108h10.714a4.287 4.287 0 014.286 4.285v10.715a4.285 4.285 0 01-4.286 4.285h-10.714a4.285 4.285 0 01-4.286-4.285V24.393a4.285 4.285 0 014.286-4.285zm-6.428 4.285a6.427 6.427 0 016.428-6.428h10.714a6.428 6.428 0 016.429 6.428v10.715a6.427 6.427 0 01-6.429 6.428h-10.714a6.426 6.426 0 01-6.428-6.428V24.393zm13.731 7.814c0 2.265-1.71 3.645-4.02 3.645-2.295 0-4.005-1.38-4.005-3.645v-7.064h2.055v6.9c0 1.02.54 1.785 1.95 1.785s1.95-.765 1.95-1.785v-6.9h2.07v7.065zm2.165 3.435V25.143h2.07v10.5h-2.07z" fill="#fff"></path></svg></div></div></div><div class="flex-auto bg-cover -ml-12" style="background-image:url(/_next/static/media/tailwind-ui.2863a71a174ce9f9c881f7fddd39c6e7.jpg)"></div></a><div class="space-y-5"><p>Tailwind UI 是一个专业设计的、预建的、完全响应的HTML片段的精选，您可以把它应用到您的 Tailwind 项目中。</p><p>目前在两个不同的类别（营销和应用 UI）有超过 350 个组件可以使用，并且我们一直在增加更多的组件。</p></div></section></div><div class="grid sm:grid-cols-3 gap-8 sm:gap-6 xl:gap-8 pb-10 border-b border-gray-200"><section><h2 class="text-xl text-gray-900 font-bold mb-4">JavaScript<span class="sr-only">: Headless UI</span></h2><a href="https://headlessui.dev/" class="h-40 xl:h-48 rounded-3xl bg-gray-900 mb-6 flex items-center justify-center p-6"><div class="w-60 max-w-full"><div class="relative" style="padding-top:25%"><span class="sr-only">Headless UI</span><svg viewBox="0 0 240 60" width="240" height="60" fill="none" class="absolute inset-0 w-full h-full"><path d="M72.165 23.711c-2.245 0-4.03.821-5.12 2.529v-8.67h-3.568v22.99h3.568v-8.802c0-3.35 1.85-4.73 4.196-4.73 2.246 0 3.7 1.314 3.7 3.81v9.722h3.568V30.477c0-4.27-2.642-6.766-6.343-6.766zM84.333 33.86h13.15c.066-.46.132-.986.132-1.478 0-4.73-3.37-8.67-8.292-8.67-5.188 0-8.722 3.777-8.722 8.637 0 4.927 3.534 8.639 8.986 8.639 3.238 0 5.715-1.348 7.235-3.58l-2.94-1.709c-.793 1.15-2.28 2.037-4.262 2.037-2.643 0-4.724-1.314-5.287-3.875v-.001zm-.032-2.89c.495-2.463 2.312-4.04 4.988-4.04 2.148 0 4.23 1.215 4.725 4.04h-9.713zm28.615-6.832v2.331c-1.256-1.707-3.205-2.758-5.783-2.758-4.493 0-8.226 3.744-8.226 8.638 0 4.86 3.733 8.639 8.226 8.639 2.578 0 4.527-1.052 5.783-2.793v2.366h3.567V24.137h-3.567v.001zm-5.22 13.466c-2.974 0-5.221-2.2-5.221-5.255 0-3.054 2.247-5.255 5.221-5.255 2.973 0 5.22 2.2 5.22 5.255 0 3.054-2.247 5.256-5.22 5.256v-.001zM132.9 17.57v8.9c-1.256-1.708-3.205-2.759-5.782-2.759-4.493 0-8.226 3.744-8.226 8.638 0 4.86 3.733 8.639 8.226 8.639 2.577 0 4.526-1.052 5.782-2.793v2.366h3.568V17.569H132.9zm-5.22 20.035c-2.973 0-5.22-2.202-5.22-5.256 0-3.054 2.247-5.255 5.22-5.255s5.22 2.2 5.22 5.255c0 3.054-2.247 5.256-5.22 5.256zm12.121 2.955h3.568V16.584h-3.568V40.56zm9.693-6.7h13.15c.066-.46.132-.986.132-1.478 0-4.73-3.37-8.67-8.293-8.67-5.187 0-8.722 3.777-8.722 8.637 0 4.927 3.535 8.639 8.987 8.639 3.237 0 5.715-1.348 7.235-3.58l-2.94-1.709c-.794 1.15-2.28 2.037-4.263 2.037-2.642 0-4.724-1.314-5.286-3.875v-.001zm-.032-2.89c.495-2.463 2.312-4.04 4.988-4.04 2.147 0 4.229 1.215 4.725 4.04h-9.713zm18.187-2.299c0-1.182 1.123-1.741 2.412-1.741 1.355 0 2.511.591 3.105 1.872l3.007-1.675c-1.156-2.168-3.403-3.416-6.112-3.416-3.37 0-6.046 1.937-6.046 5.026 0 5.879 8.887 4.236 8.887 7.16 0 1.313-1.222 1.839-2.808 1.839-1.817 0-3.139-.887-3.668-2.365l-3.072 1.774c1.057 2.364 3.436 3.843 6.74 3.843 3.568 0 6.442-1.775 6.442-5.06 0-6.075-8.887-4.268-8.887-7.257zm13.403 0c0-1.182 1.123-1.741 2.411-1.741 1.355 0 2.511.591 3.106 1.872l3.006-1.675c-1.156-2.168-3.403-3.416-6.112-3.416-3.37 0-6.046 1.937-6.046 5.026 0 5.879 8.887 4.236 8.887 7.16 0 1.313-1.222 1.839-2.808 1.839-1.817 0-3.139-.887-3.667-2.365l-3.072 1.774c1.056 2.364 3.436 3.843 6.739 3.843 3.569 0 6.443-1.775 6.443-5.06 0-6.075-8.887-4.268-8.887-7.257zm27.213 8.1c2.476 0 4.309-1.47 4.309-3.882V25.36h-2.218v7.352c0 1.087-.58 1.902-2.091 1.902-1.511 0-2.09-.815-2.09-1.903v-7.35h-2.202v7.527c0 2.412 1.833 3.882 4.292 3.882zm6.629-11.41V36.55h2.219V25.36h-2.219z" fill="#fff"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M216.232 19.996h-11.483c-2.537 0-4.593 2.045-4.593 4.566v11.416c0 2.521 2.056 4.566 4.593 4.566h11.483c2.537 0 4.593-2.044 4.593-4.566V24.562c0-2.521-2.056-4.566-4.593-4.566zm-11.483-2.283c-3.805 0-6.89 3.067-6.89 6.848v11.417c0 3.782 3.085 6.848 6.89 6.848h11.483c3.805 0 6.89-3.066 6.89-6.848V24.562c0-3.782-3.085-6.848-6.89-6.848h-11.483v-.001z" fill="#fff"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M204.749 19.995h11.483c2.537 0 4.593 2.045 4.593 4.566v11.416c0 2.522-2.056 4.566-4.593 4.566h-11.483c-2.537 0-4.593-2.044-4.593-4.566V24.562c0-2.522 2.056-4.567 4.593-4.567zm-6.89 4.566c0-3.782 3.085-6.848 6.89-6.848h11.483c3.805 0 6.89 3.066 6.89 6.848v11.416c0 3.783-3.085 6.849-6.89 6.849h-11.483c-3.805 0-6.89-3.066-6.89-6.85V24.562z" fill="#fff"></path><path d="M23.17 34.37l22.096-7.334c-.44-2.744-.754-4.579-1.12-5.978-.392-1.505-.704-1.908-.827-2.048a4.308 4.308 0 00-1.552-1.12c-.171-.073-.653-.243-2.214-.15-1.649.1-3.816.435-7.247.975-3.43.54-5.596.887-7.195 1.3-1.514.39-1.92.7-2.06.822-.487.423-.872.95-1.127 1.543-.073.17-.245.649-.15 2.201.1 1.64.437 3.794.98 7.204.152.955.288 1.812.416 2.585z" fill="url(#headless-ui_svg__paint0_linear)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17.078 32.678c-1.05-6.597-1.577-9.895-.437-12.543a9.998 9.998 0 012.63-3.6c2.18-1.895 5.499-2.418 12.136-3.463s9.954-1.567 12.618-.435a10.054 10.054 0 013.62 2.614c1.906 2.169 2.432 5.469 3.483 12.066 1.051 6.598 1.578 9.896.438 12.545a10 10 0 01-2.63 3.599c-2.181 1.894-5.5 2.417-12.136 3.462-6.637 1.045-9.955 1.567-12.62.435a10.054 10.054 0 01-3.62-2.614c-1.904-2.17-2.43-5.47-3.482-12.067v.001zm11.707 11.715c1.777-.107 4.065-.462 7.454-.996 3.388-.534 5.674-.898 7.399-1.343 1.67-.43 2.44-.85 2.937-1.282a6.43 6.43 0 001.69-2.314c.26-.603.424-1.46.32-3.172-.108-1.768-.466-4.042-1.003-7.41-.536-3.37-.903-5.642-1.35-7.357-.433-1.66-.856-2.425-1.29-2.918a6.464 6.464 0 00-2.328-1.681c-.605-.258-1.468-.422-3.19-.318-1.778.107-4.066.463-7.455.997-3.389.533-5.675.897-7.4 1.341-1.67.431-2.438.851-2.936 1.283a6.43 6.43 0 00-1.69 2.314c-.26.603-.424 1.46-.32 3.172.107 1.768.466 4.042 1.003 7.411.536 3.369.903 5.642 1.35 7.355.433 1.661.857 2.426 1.29 2.92a6.463 6.463 0 002.327 1.68c.606.258 1.469.422 3.192.317v.001z" fill="url(#headless-ui_svg__paint1_linear)"></path><defs><linearGradient id="headless-ui_svg__paint0_linear" x1="30.183" y1="12.001" x2="35.863" y2="47.711" gradientUnits="userSpaceOnUse"><stop stop-color="#66E3FF"></stop><stop offset="1" stop-color="#7064F9"></stop></linearGradient><linearGradient id="headless-ui_svg__paint1_linear" x1="30.183" y1="12" x2="35.864" y2="47.711" gradientUnits="userSpaceOnUse"><stop stop-color="#66E3FF"></stop><stop offset="1" stop-color="#7064F9"></stop></linearGradient></defs></svg></div></div></a><p>完全非风格化的，完全可访问的UI组件，为与 Tailwind CSS 的完美整合而设计。</p></section><section><h2 class="text-xl text-gray-900 font-bold mb-4">Icons<span class="sr-only">: Heroicons</span></h2><a href="https://heroicons.com/" class="relative flex h-40 xl:h-48 rounded-3xl bg-gradient-to-br from-violet-600 to-purple-500 mb-6"><div class="absolute inset-0 flex items-center justify-center p-6 bg-contain" style="background-image:url(/_next/static/media/heroicons-bg.5956ef11ef9efac96c29354c7187771a.svg)"><div class="w-60 max-w-full"><div class="relative" style="padding-top:25%"><span class="sr-only">Heroicons</span><svg viewBox="0 0 240 60" width="240" height="60" fill="none" class="absolute inset-0 w-full h-full"><path d="M88.503 24.216c-2.15 0-3.817.802-4.78 2.245V18.25h-4.137v22.452h4.138v-8.66c0-2.79 1.507-3.977 3.528-3.977 1.86 0 3.175 1.122 3.175 3.303v9.334h4.138v-9.847c0-4.266-2.662-6.64-6.062-6.64zm12.449 10.167h12.092c.097-.545.161-1.09.161-1.7 0-4.714-3.368-8.467-8.115-8.467-5.036 0-8.468 3.688-8.468 8.468 0 4.779 3.4 8.467 8.789 8.467 3.079 0 5.484-1.25 6.992-3.432l-3.336-1.924c-.706.93-1.988 1.603-3.592 1.603-2.181 0-3.945-.898-4.523-3.015zm-.064-3.207c.481-2.053 1.989-3.24 4.202-3.24 1.732 0 3.464.93 3.977 3.24h-8.179zm18.701-3.753v-2.758h-4.137v16.037h4.137v-7.666c0-3.367 2.727-4.33 4.876-4.073v-4.619c-2.021 0-4.042.898-4.876 3.08zm13.693 13.728c4.715 0 8.499-3.688 8.499-8.468 0-4.779-3.784-8.467-8.499-8.467-4.715 0-8.468 3.688-8.468 8.468 0 4.779 3.753 8.467 8.468 8.467zm0-4.041c-2.438 0-4.33-1.828-4.33-4.426s1.892-4.427 4.33-4.427c2.469 0 4.362 1.828 4.362 4.427 0 2.598-1.893 4.426-4.362 4.426zm12.821-14.37c1.412 0 2.566-1.154 2.566-2.533 0-1.38-1.154-2.566-2.566-2.566-1.379 0-2.534 1.186-2.534 2.566 0 1.379 1.155 2.534 2.534 2.534zm-2.052 17.962h4.137V24.665h-4.137v16.037zm14.916.449c3.144 0 5.87-1.668 7.249-4.17l-3.592-2.052c-.642 1.315-2.021 2.117-3.689 2.117-2.469 0-4.298-1.829-4.298-4.362 0-2.566 1.829-4.395 4.298-4.395 1.636 0 3.015.834 3.657 2.15l3.56-2.085c-1.315-2.47-4.041-4.138-7.185-4.138-4.875 0-8.467 3.688-8.467 8.468 0 4.779 3.592 8.467 8.467 8.467zm16.179 0c4.715 0 8.5-3.688 8.5-8.468 0-4.779-3.785-8.467-8.5-8.467s-8.467 3.688-8.467 8.468c0 4.779 3.752 8.467 8.467 8.467zm0-4.041c-2.437 0-4.33-1.828-4.33-4.426s1.893-4.427 4.33-4.427c2.47 0 4.362 1.828 4.362 4.427 0 2.598-1.892 4.426-4.362 4.426zm19.686-12.894c-2.149 0-3.817.802-4.779 2.245v-1.796h-4.138v16.037h4.138v-8.66c0-2.79 1.507-3.977 3.528-3.977 1.86 0 3.175 1.122 3.175 3.303v9.334h4.138v-9.847c0-4.266-2.662-6.64-6.062-6.64zm12.77 5.004c0-.866.834-1.316 1.861-1.316 1.186 0 2.084.61 2.566 1.636l3.528-1.924c-1.251-2.213-3.496-3.4-6.094-3.4-3.304 0-6.094 1.828-6.094 5.1 0 5.645 8.275 4.362 8.275 6.703 0 .93-.898 1.38-2.213 1.38-1.604 0-2.695-.77-3.144-2.085l-3.592 2.02c1.155 2.47 3.528 3.817 6.736 3.817 3.432 0 6.447-1.668 6.447-5.132 0-5.901-8.276-4.426-8.276-6.8z" fill="#fff"></path><path d="M43.328 14.608a26.329 26.329 0 0015.953 5.613c.247 1.331.376 2.705.376 4.111 0 10.272-6.905 18.937-16.329 21.597C33.904 43.269 27 34.604 27 24.332c0-1.406.13-2.78.376-4.112a26.328 26.328 0 0015.952-5.612z" stroke="#AC94FA" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg></div></div></div></a><p>一组免费的 MIT 授权的高质量 SVG 图标，供您在您的网页项目中使用。</p></section><section><h2 class="text-xl text-gray-900 font-bold mb-4">Patterns<span class="sr-only">: Heropatterns</span></h2><a href="https://www.heropatterns.com/" class="relative flex h-40 xl:h-48 rounded-3xl bg-gradient-to-br from-cyan-600 to-teal-500 mb-6"><div class="absolute inset-0 flex items-center justify-center p-6 bg-cover" style="background-image:url(/_next/static/media/heropatterns-bg.fb8bb5273c3f81536c6e6d4cab136e1b.svg)"><div class="w-60 max-w-full"><div class="relative" style="padding-top:25%"><span class="sr-only">Heropatterns</span><svg viewBox="0 0 240 60" width="240" height="60" fill="none" class="absolute inset-0 w-full h-full"><path d="M64.503 24.214c-2.15 0-3.817.802-4.78 2.245v-8.211h-4.137V40.7h4.138v-8.66c0-2.79 1.507-3.977 3.528-3.977 1.86 0 3.175 1.122 3.175 3.303V40.7h4.138v-9.847c0-4.266-2.662-6.64-6.062-6.64zm12.449 10.168h12.092a9.56 9.56 0 00.16-1.7c0-4.715-3.367-8.468-8.114-8.468-5.036 0-8.468 3.689-8.468 8.468s3.4 8.467 8.789 8.467c3.079 0 5.484-1.25 6.992-3.432l-3.336-1.924c-.705.93-1.988 1.604-3.592 1.604-2.181 0-3.945-.899-4.523-3.015zm-.064-3.208c.481-2.053 1.989-3.24 4.202-3.24 1.732 0 3.464.93 3.977 3.24h-8.179zm18.702-3.753v-2.758h-4.138V40.7h4.137v-7.666c0-3.367 2.727-4.33 4.876-4.073v-4.619c-2.021 0-4.042.898-4.876 3.08zm13.692 13.729c4.715 0 8.499-3.69 8.499-8.468 0-4.78-3.784-8.468-8.499-8.468-4.715 0-8.468 3.689-8.468 8.468s3.753 8.467 8.468 8.467zm0-4.042c-2.438 0-4.33-1.828-4.33-4.426 0-2.599 1.892-4.427 4.33-4.427 2.469 0 4.362 1.829 4.362 4.427s-1.893 4.426-4.362 4.426zm20.102-12.894c-2.341 0-4.041.866-5.196 2.341v-1.892h-4.137v22.452h4.137v-8.307c1.155 1.475 2.855 2.341 5.196 2.341 4.298 0 7.826-3.688 7.826-8.467 0-4.78-3.528-8.468-7.826-8.468zm-.77 12.99c-2.533 0-4.426-1.828-4.426-4.522 0-2.695 1.893-4.523 4.426-4.523 2.566 0 4.459 1.828 4.459 4.523 0 2.694-1.893 4.522-4.459 4.522zm23.061-12.541v1.892c-1.154-1.443-2.886-2.341-5.228-2.341-4.266 0-7.794 3.689-7.794 8.468s3.528 8.467 7.794 8.467c2.342 0 4.074-.898 5.228-2.341V40.7h4.138V24.663h-4.138zm-4.458 12.541c-2.534 0-4.426-1.828-4.426-4.522 0-2.695 1.892-4.523 4.426-4.523 2.566 0 4.458 1.828 4.458 4.523 0 2.694-1.892 4.522-4.458 4.522zm20.88-8.564v-3.977h-3.625v-4.49l-4.137 1.25v3.24h-2.791v3.977h2.791v6.672c0 4.33 1.956 6.03 7.762 5.388v-3.753c-2.374.129-3.625.097-3.625-1.635V28.64h3.625zm10.822 0v-3.977h-3.624v-4.49l-4.138 1.25v3.24h-2.79v3.977h2.79v6.672c0 4.33 1.957 6.03 7.762 5.388v-3.753c-2.373.129-3.624.097-3.624-1.635V28.64h3.624zm5.271 5.742h12.092a9.58 9.58 0 00.16-1.7c0-4.715-3.367-8.468-8.114-8.468-5.036 0-8.468 3.689-8.468 8.468s3.4 8.467 8.788 8.467c3.079 0 5.485-1.25 6.993-3.432l-3.336-1.924c-.706.93-1.989 1.604-3.593 1.604-2.181 0-3.945-.899-4.522-3.015zm-.064-3.208c.481-2.053 1.988-3.24 4.202-3.24 1.732 0 3.464.93 3.977 3.24h-8.179zm18.701-3.753v-2.758h-4.138V40.7h4.138v-7.666c0-3.367 2.726-4.33 4.875-4.073v-4.619c-2.02 0-4.041.898-4.875 3.08zm15.57-3.207c-2.149 0-3.816.802-4.779 2.245v-1.796h-4.137V40.7h4.137v-8.66c0-2.79 1.508-3.977 3.528-3.977 1.861 0 3.176 1.122 3.176 3.303V40.7h4.137v-9.847c0-4.266-2.662-6.64-6.062-6.64zm12.771 5.004c0-.866.834-1.316 1.86-1.316 1.187 0 2.085.61 2.566 1.636l3.528-1.924c-1.251-2.213-3.496-3.4-6.094-3.4-3.304 0-6.094 1.828-6.094 5.1 0 5.645 8.275 4.362 8.275 6.703 0 .93-.898 1.38-2.213 1.38-1.604 0-2.694-.77-3.143-2.085l-3.593 2.02c1.155 2.47 3.529 3.817 6.736 3.817 3.432 0 6.447-1.668 6.447-5.132 0-5.901-8.275-4.426-8.275-6.8z" fill="#fff"></path><path d="M19.328 14.608a26.329 26.329 0 0015.953 5.613c.247 1.331.376 2.705.376 4.111 0 10.272-6.905 18.937-16.329 21.597C9.904 43.269 3 34.604 3 24.332c0-1.406.13-2.78.376-4.112a26.328 26.328 0 0015.952-5.612z" stroke="#AFECEF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg></div></div></div></a><p>一套免费的 MIT 授权的高质量 SVG 图案，供你在你的网页项目中使用。</p></section></div><section><h2 class="text-2xl tracking-tight font-extrabold text-gray-900 mt-10 mb-8">参与讨论</h2><ul class="grid sm:grid-cols-2 gap-6 xl:gap-8"><li><a href="https://github.com/tailwindlabs/tailwindcss/discussions" class="flex items-start space-x-4"><svg fill="currentColor" class="flex-none text-gray-900 w-12 h-12"><rect width="48" height="48" rx="12"></rect><path d="M23.997 12a12 12 0 00-3.792 23.388c.6.12.816-.264.816-.576l-.012-2.04c-3.336.72-4.044-1.608-4.044-1.608-.552-1.392-1.332-1.764-1.332-1.764-1.08-.744.084-.72.084-.72 1.2.084 1.836 1.236 1.836 1.236 1.08 1.824 2.808 1.296 3.492.996.12-.78.42-1.308.756-1.608-2.664-.3-5.46-1.332-5.46-5.928 0-1.32.468-2.388 1.236-3.228a4.32 4.32 0 01.12-3.168s1.008-.324 3.3 1.224a11.496 11.496 0 016 0c2.292-1.56 3.3-1.224 3.3-1.224.66 1.644.24 2.88.12 3.168.768.84 1.236 1.92 1.236 3.228 0 4.608-2.808 5.616-5.484 5.916.432.372.816 1.104.816 2.22l-.012 3.3c0 .312.216.696.828.576A12 12 0 0023.997 12z" fill="currentColor" class="text-gray-50"></path></svg><div class="flex-auto"><h3 class="font-bold text-gray-900">GitHub Discussions</h3><p>联系 Tailwind CSS 社区的成员。</p></div></a></li><li><a href="/discord" class="flex items-start space-x-4"><svg fill="currentColor" class="flex-none text-indigo-400 w-12 h-12"><rect width="48" height="48" rx="12"></rect><path d="M21.637 23.57c-.745 0-1.332.653-1.332 1.45 0 .797.6 1.45 1.332 1.45.744 0 1.332-.653 1.332-1.45.013-.797-.588-1.45-1.332-1.45zm4.767 0c-.744 0-1.332.653-1.332 1.45 0 .797.6 1.45 1.332 1.45.745 0 1.332-.653 1.332-1.45 0-.797-.587-1.45-1.332-1.45z" fill="currentColor" class="text-indigo-50"></path><path d="M32.75 12.613H15.248a2.684 2.684 0 00-2.678 2.69v17.66a2.684 2.684 0 002.678 2.69h14.811l-.692-2.416 1.672 1.554 1.58 1.463 2.809 2.482V15.304a2.684 2.684 0 00-2.678-2.69zm-5.042 17.058s-.47-.561-.862-1.058c1.711-.483 2.364-1.554 2.364-1.554-.535.353-1.045.6-1.502.77a8.591 8.591 0 01-1.894.562 9.151 9.151 0 01-3.383-.013 10.964 10.964 0 01-1.92-.561 7.652 7.652 0 01-.953-.445c-.04-.026-.078-.039-.117-.065-.027-.013-.04-.026-.053-.039-.235-.13-.365-.222-.365-.222s.627 1.045 2.285 1.541c-.392.497-.875 1.084-.875 1.084-2.886-.091-3.983-1.985-3.983-1.985 0-4.206 1.88-7.615 1.88-7.615C20.211 18.661 22 18.7 22 18.7l.131.157c-2.35.679-3.435 1.71-3.435 1.71s.287-.156.77-.378c1.398-.614 2.508-.784 2.965-.823.079-.013.144-.026.223-.026a10.647 10.647 0 016.57 1.228s-1.033-.98-3.253-1.66l.183-.208s1.79-.04 3.67 1.371c0 0 1.881 3.41 1.881 7.615 0 0-1.11 1.894-3.997 1.985z" fill="currentColor" class="text-indigo-50"></path></svg><div class="flex-auto"><h3 class="font-bold text-gray-900">Discord</h3><p>加入我们的 Discord 群组与其它的 Tailwind 用户交流。</p></div></a></li><li><a href="https://twitter.com/tailwindcss" class="flex items-start space-x-4"><svg fill="currentColor" class="flex-none text-light-blue-400 w-12 h-12"><rect width="48" height="48" rx="12"></rect><path d="M37.127 15.989h-.001a11.04 11.04 0 01-3.093.836 5.336 5.336 0 002.37-2.932 10.815 10.815 0 01-3.421 1.284 5.42 5.42 0 00-3.933-1.679c-2.976 0-5.385 2.373-5.385 5.3-.003.406.044.812.138 1.207a15.351 15.351 0 01-11.102-5.54 5.235 5.235 0 00-.733 2.663c0 1.837.959 3.461 2.406 4.413a5.338 5.338 0 01-2.449-.662v.066c0 2.57 1.86 4.708 4.32 5.195a5.55 5.55 0 01-1.418.186c-.34 0-.68-.033-1.013-.099.684 2.106 2.676 3.637 5.034 3.68a10.918 10.918 0 01-6.69 2.269 11.21 11.21 0 01-1.285-.077 15.237 15.237 0 008.242 2.394c9.918 0 15.337-8.077 15.337-15.083 0-.23-.006-.459-.017-.683a10.864 10.864 0 002.686-2.746l.007.008z" fill="currentColor" class="text-light-blue-50"></path></svg><div class="flex-auto"><h3 class="font-bold text-gray-900">Twitter</h3><p>关注 Tailwind 的推特账户，了解新闻和更新。</p></div></a></li><li><a href="https://www.youtube.com/tailwindlabs" class="flex items-start space-x-4"><svg fill="currentColor" class="flex-none text-red-500 w-12 h-12"><rect width="48" height="48" rx="12"></rect><path d="M36.83 18.556c0-2.285-1.681-4.124-3.758-4.124a184.713 184.713 0 00-8.615-.182h-.914c-2.925 0-5.799.05-8.612.183-2.072 0-3.753 1.848-3.753 4.133A75.6 75.6 0 0011 23.99a78.487 78.487 0 00.173 5.429c0 2.285 1.68 4.139 3.753 4.139 2.955.137 5.987.198 9.07.192 3.087.01 6.11-.054 9.069-.193 2.077 0 3.758-1.853 3.758-4.138.121-1.813.177-3.62.172-5.434a73.982 73.982 0 00-.165-5.428zM21.512 28.97v-9.979l7.363 4.987-7.363 4.992z" fill="currentColor" class="text-red-50"></path></svg><div class="flex-auto"><h3 class="font-bold text-gray-900">YouTube</h3><p>观看 Tailwind 的网络直播和专题教程。</p></div></a></li></ul></section></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json" crossorigin="anonymous">{"props":{"pageProps":{}},"page":"/resources","query":{},"buildId":"HgBbTMZ3YfwE_s19lauyf","nextExport":true,"autoExport":true,"isFallback":false,"head":[["meta",{"name":"viewport","content":"width=device-width"}],["meta",{"charSet":"utf-8"}],["meta",{"name":"twitter:site","content":"@tailwindcss"}],["meta",{"name":"twitter:description","content":"Documentation for the Tailwind CSS framework."}],["meta",{"name":"twitter:creator","content":"@tailwindcss"}],["meta",{"property":"og:url","content":"https://tailwindcss.com/resources"}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:description","content":"Documentation for the Tailwind CSS framework."}],["meta",{"property":"og:image","content":"https://tailwindcss.com/_next/static/media/twitter-large-card.85c0ff9e455da585949ff0aa50981857.jpg"}],["link",{"rel":"preconnect","href":"https://BH4D9OD16A-dsn.algolia.net","crossOrigin":"true"}],["title",{"children":"资源 - Tailwind CSS"}],["meta",{"name":"twitter:title","content":"资源 - Tailwind CSS"}],["meta",{"property":"og:title","content":"资源 - Tailwind CSS"}],["meta",{"name":"twitter:card","content":"summary"}],["meta",{"name":"twitter:image","content":"https://tailwindcss.com/_next/static/media/twitter-square.daf77586b35e90319725e742f6e069f9.jpg"}]]}</script><script crossorigin="anonymous" nomodule="">!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script crossorigin="anonymous" nomodule="" src="/_next/static/chunks/polyfills-b94cf467f33d5bbe5093.js"></script><script src="/_next/static/chunks/main-59b4822e49ee8af6cbd2.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/main-53486d82b2545edae223.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/webpack-07c5bcab23dc3e52a7c0.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/framework.dc32737cd22c934f019a.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/framework.dc32737cd22c934f019a.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/commons.a0844ced5e8df247f6dc.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/commons.22d76c353a4f72632887.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.badcd99128b41b157438.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.1d9cdb0d7e423ae8ff11.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/pages/_app-f73fc4f2530091cec505.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/pages/_app-22af6c3e18ff3a768b97.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/cecf69130dad263f9cb4ff787dd0f2dc73bfee9f.425fee7e5ce182155bfa.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/cecf69130dad263f9cb4ff787dd0f2dc73bfee9f.a38ff4d7f346d15b14bc.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/pages/resources-aadc873840ca7d7ba7c6.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/pages/resources-6b97d8f1aa18520a45da.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_buildManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_buildManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_ssgManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_ssgManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script> </script></body></html>